<template>
    <view class="employee-helper">
        <view class="employee-helper-tab">
            <!-- 待提货 -->
            <!-- 全部订单 -->
            <view
                class="employee-helper-tab-item"
                v-for="item in tabList"
                :key="item.val"
                @tap="changeTab(item)"
                :class="{ 'employee-helper-tab-item_active': item.val === tabVal }"
                ><text class="custom-text">{{ item.label }}</text></view
            >
        </view>
        <!-- 查找，全部订单显示 -->
        <view class="employee-helper-search" v-if="tabVal === 2">
            <image class="custom-icon-search" :src="getImgOssUrl('/ui-prod-2.0.0/search_1.1.png')"></image>
            <input
                class="custom-input-main"
                placeholder-class="custom-input-main-placeholder"
                placeholder="请输入订单号/联系人姓名/手机号"
                type="text"
                v-model="keywords"
                :maxlength="40"
                confirm-type="search"
                @confirm="searchConfirm" />
        </view>
        <view class="employee-helper-list">
            <view class="employee-helper-list-item" v-for="item in list" :key="item.id" @tap="jumpToOrder(item.id)">
                <view class="list-item-header">
                    <text class="order-text">订单号：{{ item.orderSn }}</text>
                    <text class="status-text">{{ translateOrderCode(item.orderStatus, item.isSelfPickup) }}</text>
                </view>
                <view
                    class="list-item-goods"
                    v-for="goodsItem in item.goods"
                    :key="goodsItem.id"
                    :class="{ 'line-through': [1, 5].includes((goodsItem.refundStatus || 0) / 1) }">
                    <view class="list-item-title">
                        {{ goodsItem.goodsName }}
                        <view
                            class="list-item-title-status"
                            :class="{
                                'status-color': goodsItem.refundStatus == 5,
                                'status-color2': goodsItem.refundStatus == 12
                            }"
                            v-if="[1, 5, 12].includes((goodsItem.refundStatus || 0) / 1)"
                            >{{ statuesText[goodsItem.refundStatus] }}</view
                        >
                    </view>
                    <view class="list-item-value">
                        <text class="list-item-spec">{{ getArrayText(goodsItem.skuExtInfo) }}</text>
                        <!-- 部分退款显示的数量 -->
                        <!-- todo:状态为部分退款，refundStatus 12定的部分退款，goodsItem?.buyNum - goodItem?.refundNum是有效数量-->
                        <text class="list-item-total" v-if="goodsItem.refundStatus == 12">
                            <text class="line-through-text buy-num"> X {{ goodsItem.buyNum }}</text>
                            X {{ goodsItem.buyNum - goodsItem.refundNum }}
                        </text>
                        <!-- 其他状态显示的数量 -->
                        <text class="list-item-total" v-else> X {{ goodsItem.buyNum }} </text>
                    </view>
                </view>
            </view>
            <!-- 静态参考页面 -->
            <!-- <view class="employee-helper-list-item" @tap="jumpToOrder">
                <view class="list-item-header">
                    <text>订单号：2222223333333</text>
                    <text class="status-text">待提货</text>
                </view>
                <view class="list-item-goods">
                    <view class="list-item-title">商品名称商品名称商品名称商品名称商品</view>
                    <view class="list-item-value">
                        <text class="list-item-spec">规格值1</text>
                        <text class="list-item-total"><text class="line-through-text">X 1</text>X 1</text>
                    </view>
                </view>
                <view class="list-item-goods">
                    <view class="list-item-title">商品名称商品名称商品名称商品名称商品</view>
                    <view class="list-item-value">
                        <text class="list-item-spec">规格值1</text>
                        <text class="list-item-total">X 1</text>
                    </view>
                </view>
            </view>
            <view class="employee-helper-list-item line-through">
                <view class="list-item-header">
                    <text>订单号：2222223333333</text>
                    <text class="status-text">待提货</text>
                </view>
                <view class="list-item-goods">
                    <view class="list-item-title">
                        商品名称商品名称商品名称商品名称商品
                        <view class="list-item-title-status">售后中</view>
                    </view>
                    <view class="list-item-value">
                        <text class="list-item-spec">规格值1</text>
                        <text class="list-item-total">X 1</text>
                    </view>
                </view>
                <view class="list-item-goods">
                    <view class="list-item-title">商品名称商品名称商品名称商品名称商品</view>
                    <view class="list-item-value">
                        <text class="list-item-spec">规格值1</text>
                        <text class="list-item-total">X 1</text>
                    </view>
                </view>
            </view> -->
            <view class="no-data" v-if="!list?.length">
                <img class="no-data-img" :src="getImgOssUrl('/ui-prod-2.0.0/nodata_1.1.png')" />
                <text class="no-data-title">暂无相关订单</text>
            </view>
        </view>
        <!-- 悬浮 -->
        <view class="verification-icon" @tap="jumpTo('/pages-user/helper/verification/index')">
            <image class="custom-icon" :src="getImgOssUrl('/ui-prod-2.9.0/icon-scan-code.png')"></image>
            <text class="custom-text">核销</text>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import router from '@/router';
import request from '@/request';
import { getImgOssUrl, translateOrderCode } from '@/commons/utils';

let tabVal = ref(1);
let keywords = ref('');
let keywordsClone = ref('');
const list = reactive([]);
// todo:待提货数量
let totalCount = ref(0);
const tabList = computed(() => {
    return [
        { label: `待提货(${totalCount.value})`, val: 1 },
        { label: '全部订单', val: 2 }
    ];
});

const jumpTo = (path, query) => {
    router.push({
        path,
        query
    });
};
const statuesText = reactive({
    1: '售后中',
    5: '已退款',
    12: '部分退款'
});

const jumpToOrder = orderId => {
    jumpTo('/pages-user/orderdetail/index', {
        // todo需要的参数
        orderId,
        type: 2
    });
};

const getArrayText = target => {
    return (target || [])?.map(item => item.attributeValue)?.join('；');
};

const getOrderTotal = async () => {
    // 获取待提货订单数量
    const { data } = await request('staffCenter', {
        tab: 1,
        keywords: ''
    });
    totalCount.value = (data || {})?.totalCount || 0;
};

const changeTab = tab => {
    tabVal.value = tab.val;
    // 重置字段，重新请求接口
    keywords.value = '';
    if (tabVal.value == 2) {
        getOrderTotal();
    }
    getList();
};
const searchConfirm = () => {
    // 查询
    keywordsClone.value = keywords.value;
    getList();
};
const getList = async () => {
    // 获取订单
    // todo:是否有分页
    const { data } = await request('staffCenter', {
        tab: tabVal.value,
        keywords: keywords.value
    });
    if (tabVal.value == 1) {
        totalCount.value = (data || {})?.totalCount || 0;
    }
    list.length = 0;
    list.push(...((data || {})?.list || []));
};

onShow(() => {
    if (tabVal.value == 2) {
        getOrderTotal();
    }
    keywords.value = keywordsClone.value;
    getList();
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
